<template>
    <div>
        <h4>vue高级特性</h4>

        <!-- <p>{{name}}</p>
        <CustomVModel v-model="name" /> -->

        <!-- <nextTick /> -->

        <!-- <SlotDemo :blog="info.blog" >
            {{info.blog}}
        </SlotDemo> -->

        <!-- 作用域插槽 -->
        <ScopedSlotDemo :blog="info.blog" >
            <!-- 如果要传子组件内部的值 -->
            <template v-slot="slotProps">
                {{slotProps.slotData.title}}
            </template>
        </ScopedSlotDemo>

        <!-- 具名插槽 -->
        <NamedSlot>
            <template v-slot:header>
                <h1>将插入header slot中</h1>
            </template>
            <p>
                将插入main slot中，即未命名的slot
            </p>
            <!-- 缩写 <template #footer>  -->
            <template #footer>
                <p>将插入到footer slot中</p>
            </template> 
        </NamedSlot>


        <!-- 动态组件 -->
        <!-- <component :is="nextTickName"></component> -->

        <!-- <div v-for="(val,key) in newsData" :key="key">
             当前组件种类：{{val.type}}
             <component :is="val.type" />
        </div> -->

        <!-- 异步组件： -->
        <FormDemo v-if="showFormDemo" />
        <button @click="showFormDemo=true">点击加载异步组件</button>

        <!-- keepAlive使用： -->
        <KeepAlive />
    </div>
</template>
<script>
import CustomVModel from './CustomVModel'
import nextTick from './nextTick'
import SlotDemo from './SlotDemo'
import ScopedSlotDemo from './ScopedSlotDemo'
import NamedSlot from './NamedSlot'
import KeepAlive from './KeepAlive'
export default {
    components:{
        CustomVModel,
        nextTick,
        SlotDemo,
        ScopedSlotDemo,
        NamedSlot,
        // 异步组件
        FormDemo:()=>{
            return import('../BaseUse/FormDemo')
        },        
        // FormDemo:()=>import('../BaseUse/FormDemo')
        KeepAlive
    },
    data() {
        return {
            showFormDemo:false,
            name:'殷晨东',
            info:{
                blog:'https://www.cnblogs.com/',
                phone:18072862595,
                age:28,
                address:'杭州'
            },
            // 动态组件
            nextTickName:'nextTick',
            // 三种新闻组件动态加载：
            newsData:{
                1:{
                    type:'text'
                },
                2:{
                    type:'video'
                },
                3:{
                    type:'image'
                }
            }
        }
    },
}
</script>